<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery验证插件</title>
		<!-- 导入jquery本体 -->
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<!-- 导入jquery-validate拓展 -->
		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-validate/1.19.3/jquery.validate.min.js">
		</script>
		<!-- 导入中文支持 -->
		 <script
			src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-validate/1.19.3/localization/messages_zh.min.js">
		</script>
		<script>
			$.validator.setDefaults({
				submitHandler: function() {
					alert("提交事件!");
				}
			});
			$(function() {
				/*
					1 	required:true 	必须输入的字段。
					2 	remote:"check.php" 	使用 ajax 方法调用 check.php 验证输入值。
					3 	email:true 	必须输入正确格式的电子邮件。
					4 	url:true 	必须输入正确格式的网址。
					5 	date:true 	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
					6 	dateISO:true 	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
					7 	number:true 	必须输入合法的数字（负数，小数）。
					8 	digits:true 	必须输入整数。
					9 	creditcard: 	必须输入合法的信用卡号。
					10 	equalTo:"#field" 	输入值必须和 #field 相同。
					11 	accept: 	输入拥有合法后缀名的字符串（上传文件的后缀）。
					12 	maxlength:5 	输入长度最多是 5 的字符串（汉字算一个字符）。
					13 	minlength:10 	输入长度最小是 10 的字符串（汉字算一个字符）。
					14 	rangelength:[5,10] 	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
					15 	range:[5,10] 	输入值必须介于 5 和 10 之间。
					16 	max:5 	输入值不能大于 5。
					17 	min:10 	输入值不能小于 10。
				*/
				$("#commentForm").validate();

				//自定义验证规则
				/* $("#commentForm").validate({
					rules: {
						username: {
							required: true,
							minlength: 5
						},
						password: {
							required: true,
							minlength: 6
						},
						confirm_password: {
							required: true,
							minlength: 6,
							equalTo: "#cpassword"
						},
						email: {
							required: true,
							email: true
						}
					},
					messages: {
						username: {
							required: "用户名不能为空",
							minlength: "用户名至少是5个字符"
						},
						password: {
							required: "密码不能为空",
							minlength: "密码长度不能小于 6 个字符"
						},
						confirm_password: {
							required: "确认密码不能为空",
							minlength: "密码长度不能小于 6 个字符",
							equalTo: "两次密码输入不一致"
						},
						email: "请输入一个正确的邮箱",
					}
				}) */
			});
		</script>
	</head>
	<body>
		<form class="cmxform" id="commentForm" method="get" action="">
			<fieldset>
				<legend>输入您的用户名, 密码, 邮箱</legend>
				<p>
					<label for="cname">Username</label>
					<input id="cname" name="username" minlength="5" type="text" required>
				</p>
				<p>
					<label for="cpassword">Password</label>
					<input id="cpassword" name="password" minlength="6" type="password" required>
				</p>
				<p>
					<label for="cconfirmPassword">ConfirmPassword</label>
					<input id="cconfirmPassword" name="confirm_password" minlength="6" type="password" required>
				</p>
				<p>
					<label for="cemail">E-Mail (必需)</label>
					<input id="cemail" type="email" name="email" required>
				</p>
				<p>
					<input class="submit" type="submit" value="Submit">
				</p>
			</fieldset>
		</form>
	</body>
</html>
